<template>
	<view class="order">
		<uni-nav-bar left-icon="arrowleft" right-icon="search" title="拒绝订单" @clickLeft="back" @clickRight="find" :fixed="true" status-bar class="top"></uni-nav-bar>
		
		<view class="list">
			<view class="li" v-for="(item,index) in dataList" :key="index">
				<view class="shop">
					<image :src="item.image" :lazy-load="true" mode="aspectFill"></image>
					<view class="msg" @click="go_details(item.orderId)">
						<view class="order black">订单号：{{item.orderSn}}</view>
						<view class="time gray ">下单时间：{{item.createdTime}}</view>
						<view>
							<view class="sizr gray ">颜色：{{item.sku[0].split(':')[1]}}</view>
							<view class="sizr gray ">尺码：{{item.sku[1].split(':')[1]}}</view>
						</view>
					</view>
				</view>
				<view class="genre">
					<view class="msg">
						共1件
						<view class="price">
							合计：
							<text>¥{{item.orderPrice}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="dataList.length==0" class="notavailable">
			<image src="../../../static/img/notavailable.png" mode="widthFix"></image>
			<view class="nottext">暂时没有数据</view>
		</view>
		<view class="pagination" v-if="pagination">
			<view class="left" :class="{ forbid: paging.page == 1 }" @click="prev">
				<uni-icons type="arrowleft" size="20" color="#fff" class="icons" />
				上一页
			</view>
			<view class="center">{{ paging.page }}/{{ paging.total }}</view>
			<view class="right" :class="{ forbid: paging.page == paging.total }" @click="next">
				下一页
				<uni-icons type="arrowright" size="20" color="#fff" class="icons" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		uniNavBar,
		uniIcons
	} from '@dcloudio/uni-ui';
	import order from '../../../servers/agent/order/order.js';
	export default {
		components: {
			uniNavBar,
			uniIcons
		},
		data() {
			return {
				pagination:true,
				dataList: [],
				total:'',
				paging: {
					page: 1,
					total: 100
				}
			};
		},
		mounted() {
			this.initData();
		},
		methods: {
			initData() {
				uni.showLoading({
					title: '数据加载中'
				});
				
					var obj={
						currentPage: this.paging.page,
						pageSize: 10
					}
				order.rejectList(obj)
					.then(res => {
						if(res.code==200){
							if(res.data.records.length>0){
								this.paging.total = Math.ceil(res.data.total / res.data.size);
								this.dataList = res.data.records.map(v => {
									v.image = this.imgCDNUrl + v.productImg;
									var sku = [];
									if (v.productSkuDesp) {
										sku = v.productSkuDesp.split(",");
									}
									v.sku = sku;
									return v;
								});
								this.pagination=true
							}else{
								this.pagination=false
							}
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
						}
						
						console.log(this.dataList)
						uni.hideLoading();
					})
					.catch(err => {
						console.log(new Error('请检查网络后重试'));
					});
			},

			go_details(orderId) {
				uni.navigateTo({
					url: '/pages/agent/order/orderdetails?id=' + orderId
				});

			},
			back() {
				uni.navigateTo({
					url:'/pages/agent/index'
				})
			},

			find() {
				uni.navigateTo({
					url:'./agentorderfind'
				})
				
			},
			next() {
				if (this.paging.page < this.paging.total) {
					this.paging.page += 1;
					this.initData();
				}
			},
			prev() {
				if (this.paging.page > 1) {
					this.paging.page -= 1;
					this.initData();
				}
			}
		}
	};
</script>

<style lang="less" scoped>
	page {
		background: #ffffff;
	}

	.order {
		.statistics {
			margin: 46rpx 20rpx 0;
			background: #ffffff;
			border-radius: 10rpx;
			box-shadow: 5rpx 0px 20rpx #c5c5c5;

			.ul {
				padding: 10rpx;
				line-height: 117rpx;
				display: flex;
				flex-direction: row;
				font-size: 26rpx;

				.li {
					width: 50%;

					text {
						font-size: 32rpx;
						color: #f70225;
					}
				}

				.li:nth-child(1) {
					padding-left: 41rpx;
				}
			}
		}

		.list {
			// border-top: 26rpx solid #f6f6f6;
			padding: 26rpx 20rpx;

			.li {
				padding: 50rpx 0;
				border-bottom: 1px solid #e1e1e1;

				.shop {
					position: relative;
					display: flex;
					flex-direction: row;

					image {
						width: 230rpx;
						height: 230rpx;
						border-radius: 10rpx;
					}

					.msg {
						width: 431rpx;
						margin-left: 37rpx;
						line-height: 46rpx;

						.order {
							font-size: 28rpx;
						}

						.type {
							font-size: 26rpx;
						}

						.gray {
							color: #999999;
							font-size: 26rpx;
							line-height: 42rpx;
						}
					}
				}

				.genre {
					color: #bd3c8c;
					padding-top: 30rpx;
					text-align: right;

					.msg {
						color: #999999;
						font-size: 26rpx;

						.price {
							display: inline-block;
							color: #333333;
							margin-left: 29rpx;

							text {
								font-size: 30rpx;
								color: #333333;
							}
						}
					}
				}
			}

			.li:nth-last-child(1) {
				border-bottom: none;
			}
		}

		.pagination {
			margin: 50rpx 20rpx;
			text-align: center;
			line-height: 80rpx;

			.center {
				width: 176rpx;
				height: 80rpx;
				display: inline-block;
				margin: 0 43rpx;
				color: #666666;
				background: #ffffff;
				border-radius: 6rpx;
				border: 1px solid #d0d0d0;
				box-sizing: border-box;
			}

			.left,
			.right {
				width: 220rpx;
				height: 80rpx;
				background: #bd3c8c;
				color: #fff;
				border-radius: 6rpx;
				box-sizing: border-box;
			}

			.forbid {
				background: #ffffff;
				border: 1px solid #d0d0d0;
				color: #aaaaaa;

				.icons {
					color: #aaaaaa !important;
				}
			}
		}
	}
</style>
